<template>
  <div>
    <van-nav-bar title="学习记事本" :class="ln_ccc">
      <template #right>
        <van-icon name="wap-nav" size="18" @click="show = true" />
      </template>
    </van-nav-bar>
    <!-- 头部内容 -->

    <van-search
      v-model="value"
      show-action
      placeholder="请输入任务"
      @search="add"
    >
      <template #action>
        <div @click="add">提交</div>
      </template>
    </van-search>
    <!-- 搜索框部分 -->

    <two></two>

    <van-popup
      v-model="show"  
      position="left"
      :style="{ height: '100%', width: '30%' }"
    >
      <button @click="ln_ccc = 'blue'">紫色</button>
      <button @click="ln_ccc = 'pink'">粉色</button>
      <button @click="ln_ccc = 'red'">绿色</button>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from 'vant';
import ones from "../components/one";
import two from "../components/two";
export default {
  data() {
    return {
      value: "",
      show: false,
      ln_ccc: "pink",
    };
  },
  methods: {
    add() {
      var obj = {
        title: this.value,
        state: 0,
        time: new Date(),
      };
      this.$store.commit("add", obj);
      this.value=''
      Toast('添加成功！')
    },
  },
  components: {
    ones,
    two,
  },
};
</script>
<style lang="scss" scoped>
.van-nav-bar.pink {
  background-color: pink !important;
}
.van-nav-bar.blue {
  background-color: rgb(182, 62, 162) !important;
}
.van-nav-bar.red {
  background-color: rgb(104, 255, 44) !important;
}
</style>
